<template>
    <div class="goods-notice-container">
      <el-card>
        <template #header>
          <div class="card-header">
            <div>
              <el-input v-model="searchKeyword" placeholder="搜索通知单编号" size="small"
                style="width: 200px; margin-right: 10px" @input="filterTable" />
              <el-select v-model="filterStatus" placeholder="筛选状态" size="small" clearable
                style="width: 160px; margin-right: 10px" @change="filterTable">
                <el-option label="待收货" value="待收货" />
                <el-option label="已收货" value="已收货" />
              </el-select>
              <el-button type="primary" icon="Plus" @click="openDialog">新增通知</el-button>
              <el-button icon="Download" @click="exportTable">导出</el-button>
            </div>
          </div>
        </template>
  
        <el-table :data="filteredData" border style="width: 100%">
          <el-table-column prop="noticeId" label="通知单号" />
          <el-table-column prop="customerName" label="客户名称" />
          <el-table-column prop="productName" label="商品名称" />
          <el-table-column prop="productCode" label="商品编码" />
          <el-table-column prop="orderNumber" label="订单号" />
          <el-table-column prop="notifyDate" label="通知时间" />
          <el-table-column label="状态">
            <template #default="scope">
              <el-switch
                v-model="scope.row.status"
                active-value="已收货"
                inactive-value="待收货"
                @change="toggleStatus(scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="140">
            <template #default="scope">
              <el-button size="small" @click="editRow(scope.row)">编辑</el-button>
              <el-button size="small" type="danger" @click="deleteRow(scope.row.noticeId)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
  
      <el-dialog v-model="dialogVisible" title="进货通知" width="600px">
        <el-form :model="form" label-width="100px">
          <el-form-item label="通知单号">
            <el-input v-model="form.noticeId" />
          </el-form-item>
          <el-form-item label="客户名称">
            <el-input v-model="form.customerName" />
          </el-form-item>
          <el-form-item label="商品名称">
            <el-input v-model="form.productName" />
          </el-form-item>
          <el-form-item label="商品编码">
            <el-input v-model="form.productCode" />
          </el-form-item>
          <el-form-item label="订单号">
            <el-input v-model="form.orderNumber" />
          </el-form-item>
          <el-form-item label="通知时间">
            <el-date-picker v-model="form.notifyDate" type="date" placeholder="选择日期" style="width: 100%" />
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveForm">保存</el-button>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script setup lang="ts">
import { ref } from 'vue'
import dayjs from 'dayjs'

const searchKeyword = ref('')
const filterStatus = ref('')
const dialogVisible = ref(false)

interface Notice {
  noticeId: string
  customerName: string
  productName: string
  productCode: string
  orderNumber: string
  notifyDate: string
  status: '待收货' | '已收货'
}

const rawData = ref<Notice[]>([
  {
    noticeId: 'NT20240501-001', customerName: '盛世五金',
    productName: '空调设备', productCode: 'KT-162',
    orderNumber: 'ORD-6645', notifyDate: '2024-05-07',
    status: '已收货'
},
  {
    noticeId: 'NT20240501-002', customerName: '华南商贸',
    productName: '涂料油漆', productCode: 'TL-524',
    orderNumber: 'ORD-8080', notifyDate: '2024-05-04',
    status: '待收货'
},
  {
    noticeId: 'NT20240501-003', customerName: '京东物流',
    productName: '管道配件', productCode: 'GD-387',
    orderNumber: 'ORD-4907', notifyDate: '2024-05-01',
    status: '待收货'
},
  {
    noticeId: 'NT20240501-004', customerName: '华南商贸',
    productName: '管道配件', productCode: 'GD-340',
    orderNumber: 'ORD-7495', notifyDate: '2024-05-01',
    status: '待收货'
},
  {
    noticeId: 'NT20240501-005', customerName: '宝钢集团',
    productName: '建筑钢材', productCode: 'JG-532',
    orderNumber: 'ORD-5154', notifyDate: '2024-05-07',
    status: '已收货'
},
  {
    noticeId: 'NT20240501-006', customerName: '京东物流',
    productName: '管道配件', productCode: 'GD-311',
    orderNumber: 'ORD-7245', notifyDate: '2024-05-07',
    status: '待收货'
},
  {
    noticeId: 'NT20240501-007', customerName: '京东物流',
    productName: '建筑钢材', productCode: 'JG-815',
    orderNumber: 'ORD-4177', notifyDate: '2024-05-04',
    status: '已收货'
},
  {
    noticeId: 'NT20240501-008', customerName: '华南商贸',
    productName: '电动工具', productCode: 'DT-265',
    orderNumber: 'ORD-6836', notifyDate: '2024-05-03',
    status: '已收货'
},
  {
    noticeId: 'NT20240501-009', customerName: '盛世五金',
    productName: '照明设备', productCode: 'ZM-102',
    orderNumber: 'ORD-1326', notifyDate: '2024-05-01',
    status: '待收货'
},
  {
    noticeId: 'NT20240501-010', customerName: '宝钢集团',
    productName: '涂料油漆', productCode: 'TL-558',
    orderNumber: 'ORD-3339', notifyDate: '2024-05-02',
    status: '待收货'
},
  {
    noticeId: 'NT20240501-011', customerName: '顺丰仓储',
    productName: '照明设备', productCode: 'ZM-869',
    orderNumber: 'ORD-9777', notifyDate: '2024-05-05',
    status: '待收货'
},
  {
    noticeId: 'NT20240501-012', customerName: '宝钢集团',
    productName: '建筑钢材', productCode: 'JG-492',
    orderNumber: 'ORD-2693', notifyDate: '2024-05-03',
    status: '已收货'
},
  {
    noticeId: 'NT20240501-013', customerName: '京东物流',
    productName: '涂料油漆', productCode: 'TL-785',
    orderNumber: 'ORD-9345', notifyDate: '2024-05-03',
    status: '待收货'
},
  {
    noticeId: 'NT20240501-014', customerName: '京东物流',
    productName: '照明设备', productCode: 'ZM-201',
    orderNumber: 'ORD-5520', notifyDate: '2024-05-04',
    status: '待收货'
},
  {
    noticeId: 'NT20240501-015', customerName: '京东物流',
    productName: '空调设备', productCode: 'KT-439',
    orderNumber: 'ORD-5433', notifyDate: '2024-05-04',
    status: '已收货'
}
])
const filteredData = ref([...rawData.value])

const form = ref<Notice>({
  noticeId: '',
  customerName: '',
  productName: '',
  productCode: '',
  orderNumber: '',
  notifyDate: dayjs().format('YYYY-MM-DD'),
  status: '待收货'
})

function openDialog() {
  Object.assign(form.value, {
    noticeId: '',
    customerName: '',
    productName: '',
    productCode: '',
    orderNumber: '',
    notifyDate: dayjs().format('YYYY-MM-DD'),
    status: '待收货'
  })
  dialogVisible.value = true
}

function editRow(row: Notice) {
  form.value = { ...row }
  dialogVisible.value = true
}

function saveForm() {
  const index = rawData.value.findIndex(item => item.noticeId === form.value.noticeId)
  if (index > -1) {
    rawData.value[index] = { ...form.value }
  } else {
    rawData.value.push({ ...form.value })
  }
  filterTable()
  dialogVisible.value = false
}

function deleteRow(noticeId: string) {
  rawData.value = rawData.value.filter(item => item.noticeId !== noticeId)
  filterTable()
}

function toggleStatus(row: Notice) {
  const index = rawData.value.findIndex(item => item.noticeId === row.noticeId)
  if (index !== -1) {
    rawData.value[index].status = row.status
    filterTable()
  }
}

function filterTable() {
  filteredData.value = rawData.value.filter(item => {
    const matchKeyword = item.noticeId.toLowerCase().includes(searchKeyword.value.toLowerCase())
    const matchStatus = filterStatus.value ? item.status === filterStatus.value : true
    return matchKeyword && matchStatus
  })
}

function exportTable() {
  const rows = filteredData.value
  const headers = ['通知单号', '客户名称', '商品名称', '商品编码', '订单号', '通知时间', '状态']
  const keys = ['noticeId', 'customerName', 'productName', 'productCode', 'orderNumber', 'notifyDate', 'status']

  const csv = [
    headers.join(','),
    ...rows.map(row => keys.map(key => row[key as keyof Notice]).join(','))
  ].join('\n')

  const blob = new Blob([csv.replace(/\\\\n/g, '\\n')], { type: 'text/csv;charset=utf-8;' })
  const link = document.createElement('a')
  link.href = URL.createObjectURL(blob)
  link.download = '进货通知数据.csv'
  link.click()
}

</script>

  
  <style scoped>
  .goods-notice-container {
    padding: 20px;
  }
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  </style>
  